<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/lndex.css">
    <link rel="stylesheet" href="../css/cart.css">
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3418409_b08iye0h79l.css">
</head>
<body>
    <div class="header">
        <div class="header-wrapper">
            <div class="header-left">
                <ul style="list-style: none;">
                    <li class="logo">
                        <a href="../index.html" target="_blank"></a>
                    </li>
                </ul>
            </div>
            <div class="header-right">
                <ul style="list-style: none;">
                    <li class="order">
                        <i id="icons" class="iconfont icon-dingdan"></i>
                        <span>订单中心</span>
                        <i id="icons" class="iconfont icon-dingdan"></i>
                        <span><a href="../index.html" style="text-decoration: none; color:black;">主页</a></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="cart-main" id="cart-main">
        
    </div>
    <div class="footer">
        <div class="footer-wrp">
            <div class="border"></div>
            <div class="footer-text">
                <ul class="text-ul">
                    <li class="liclass">
                        <div class="tips">bilibili</div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">关于我们</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">友情链接</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">哔哩哔哩周边</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">官方认证</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">购买须知</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">客服中心</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">联系我们</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">加入我们</a>
                        </div>
                    </li>
                    <li class="liclass">
                        <div class="tips">传送门</div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">帮助中心</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">高级弹幕</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">活动专题页</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">侵权申诉</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">活动中心</a>
                        </div>
                    </li>
                    <li class="liclass">
                        <div class="li-right">
                            <div class="phone">
                                <div class="phone-img1"></div>
                                <em>手机端下载</em>
                            </div>
                            <div class="phone">
                                <div class="phone-img2"></div>
                                <em>新浪微博</em>
                            </div>
                            <div class="phone">
                                <div class="phone-img3"></div>
                                <em>官方微信</em>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="partner">
                    <div class="partner-img">
                        <div class="partner-banner"></div>
                    </div>
                    
                </div>
                <img src="../images/QQ图片20220521162722.png" style="margin-top:20px;" alt="">
            </div>
        </div>
    </div>
    <script>
        addcar();
        var  addcart;
        function addcar(){
        let id = localStorage.getItem("id");
        if(id==null){
            var str = "";
            str=`
            <div style="width:1200px;height:600px;margin:0 auto;position: relative;">
                    <a href="../html/login.html" style="color:black;">
                    <div style="position: absolute;top:200px;left:500px;">
                    <img src="https://s1.hdslb.com/bfs/static/ticket/static/img/empty-order.052a021.png" alt="">
                    <p style="text-align:center;">请先登录</p>
                    </div></a>
            </div>
            `;
            document.querySelector("#cart-main").innerHTML = str;
        }else{
        console.log(location.search);
        var obj = new URLSearchParams(location.search);
        console.log(obj);
        var pid = obj.get("id");
        console.log(pid);
        let url="http://jx.xuzhixiang.top/ap/api/cart-list.php";
        let p = axios.get(url, { params: {id}})
            .then((r) => {
                console.log(r.data);
                addcart = r.data.data;
                console.log( addcart);
                var str = "";
                addcart.forEach((pObj) => {
                    str = ` 
                <div class="project-list-item" >
                    <a href="../会员购/html/information.html?id=${pObj.pid}" target="_blank"><div class="item-img" style="background-image:url(${pObj.pimg});cursor:pointer;"></div></a> 
                        <div class="item-text">
                            <div class="text-title" onclick="skip()" style="cursor:pointer;">${pObj.pname}</div>
                            <div class="text-time">
                                <span class="iconfont icon-shijianweidu" id="shijian"></span>
                                2022.07.15 - 07.17
                            </div>
                        <div class="text-place">
                            <span id="didian" class="iconfont icon-didian"></span>
                            中原国际博览中心
                            &nbsp;&nbsp;&nbsp;  数量：<input type="text" id="buyNum${pObj.pid}" value="${pObj.pnum}" style="width:60px;border:1px solid #f25d8e;text-align:center;">
                        </div>
                        <div class="text-price">
                            <div class="text-number">
                                <span class="price-symbol">¥</span>
                                <span class="price">${pObj.pprice}</span>
                                <span class="star">起</span>
                                <span class="introduce">独家</span>
                            </div>
                            <button style="height: 20px;width:50px;" onclick="delBtnClick(${pObj.pid},this)">删除</button>
                            <button style="height: 20px;width:50px;" onclick="updateNum(${pObj.pid},this)">修改</button>
                        </div>
                    </div>
                </div>
                    `+str;
                });
                document.querySelector("#cart-main").innerHTML = str;
            });
        }
        }
            function delBtnClick(pid,btn) {
            let id = localStorage.getItem("id");
            console.log("删除");
            console.log(pid);
            console.log(btn);
            var uid = id;
            var token = localStorage.getItem("token");
            let url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
            axios
                .get(url, {
                    params: {
                        uid,
                        pid,
                        token,
                    },
                })
                .then((r) => {
                    console.log(r.data);
                    console.log(this);
                    btn.parentNode.parentNode.parentNode.remove();
                    // location.reload()
                });
        }
        function updateNum(pid,btn){
            let id = localStorage.getItem("id");
            console.log("修改");
            console.log(pid);
            console.log(btn);
            var uid = id;
            var token = localStorage.getItem("token");
            // var pnum;
            var pnum=document.querySelector("#buyNum"+pid).value;   
            var obj=addcart.find(function(item){
                        return pid==item.pid;
                    });
            obj.pnum=pnum;
            var addcar=obj;
            let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
            axios
                .get(url, {
                    params: {
                        uid,
                        pid,
                        pnum,
                        token,
                    },
                })
                .then((r) => {
                    console.log(r.data);
                    console.log(this);
                    console.log(obj);
                    console.log(addcar);
                    var str = "";
                addcart.forEach((obj) => {
                    str = ` 
                <div class="project-list-item">
                    <a href="../会员购/html/information.html?id=${obj.pid}" target="_blank"><div class="item-img" style="background-image:url(${obj.pimg});cursor:pointer;"></div></a> 
                        <div class="item-text">
                            <div class="text-title" onclick="skip()" style="cursor:pointer;">${obj.pname}</div>
                            <div class="text-time">
                                <span class="iconfont icon-shijianweidu" id="shijian"></span>
                                2022.07.15 - 07.17
                            </div>
                        <div class="text-place">
                            <span id="didian" class="iconfont icon-didian"></span>
                            中原国际博览中心
                            &nbsp;&nbsp;&nbsp;  数量：<input type="text" id="buyNum${obj.pid}" value="${obj.pnum}" style="width:60px;border:1px solid #f25d8e;text-align:center;">
                        </div>
                        <div class="text-price">
                            <div class="text-number">
                                <span class="price-symbol">¥</span>
                                <span class="price">${obj.pprice}</span>
                                <span class="star">起</span>
                                <span class="introduce">独家</span>
                            </div>
                            <button style="height: 20px;width:50px;" onclick="delBtnClick(${obj.pid},this)">删除</button>
                            <button style="height: 20px;width:50px;" onclick="updateNum(${obj.pid},this)">修改</button>
                        </div>
                    </div>
                </div>
                    `+str;
                });
                document.querySelector("#cart-main").innerHTML = str;
                });
        }
    </script>
</body>
</html>